<template>
  <div style="height:100px;">
    <transition appear :duration="150">
      <div :key="a" >
        <div style="position:absolute;left:0;top:0;" class="box abc0" @click="add" v-if="a % 2 == 0">w测试 {{ a }} + {{ b }} = {{ c }}</div>
        <div style="position:absolute;left:0;top:0;" class="box abc1" @click="add" v-if="a % 2 == 1">w测试 {{ a }} + {{ b }} = {{ c }}</div>
      </div>
    </transition>
  </div>
  <transition-group tag="ul" name="ul">
    <li v-for="item in items" :key="item">{{ item }}</li>
  </transition-group>
  <single-slot>
    <template #default="abc">
      内容有abc的，但是这里是默认插槽，所以数据读取就写在父级了{{ abc }}
    </template>
    <template #header="header">
      这里是标题的内容 {{ header }}
    </template>
  </single-slot>
  <button @click="add">添加</button>
  <button @click="remove">删除</button>
  <button @click="delay">延迟</button>
  <delay-component></delay-component>
</template>
<script>
import SingleSlot from './components/SingleSlot.vue'
import delayComponent from './components/delayComponent.vue'
import { defineAsyncComponent } from 'vue'
export default{
  components : {
    SingleSlot,
    //delayComponent : defineAsyncComponent(() => import('./components/delayComponent.vue'))
    delayComponent
  },
  data(){
    return {
      items : [1,2,3,4,5,6,7,8],
      a : 1,
      b : 2
    }
  },
  computed : {
    c(){
      return this.a + this.b;
    }
  },
  methods : {
    add(){
      this.a++;
      let index = Math.random()* this.items.length;
      this.items.splice(index,0,this.items.length + 1);
      console.log(`helloworld`);
      let c = null;
      let a = c ?? 100;
      console.log(a);
    },
    remove(){
      let index = Math.random()* this.items.length;
      this.items.splice(index,1);
    },
    delay(){

    }
  },
}
</script>
<style type="text/css">
.box{
  width:100px;
  height:100px;
  border:1px solid #000;
  &.abc0{
    background:blue;
  }
  &.abc1{
    background:grey;
  }
}

ul{
  width:300px;
  overflow:hidden;
}
/* 下面我们会解释这些 class 是做什么的 */
.ul-move,
.ul-enter-active,
.ul-leave-active {
  transition: all 0.3s ease;
}

.ul-enter-from{
  opacity: 0;
  transform:translatex(30px);
}

.ul-leave-to {
  opacity: 0;
  transform:translatex(-30px);
}
.ul-leave-active{
  position:absolute;
}
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
